<template>
  <div class="leftbottom pad15 hei00 box flex col">
    <div class="flex_middle titles pad_l5">
      <dv-decoration-6 style="width: 45px; height: 20px" />
      <div class="mar_l10">城市人口密集程度top10</div>
    </div>
    <div class="concent flex1 hei00">
      <div class="pre" id="main_one"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.onepie();
  },
  created() { },
  methods: {
    onepie() {
      var chartDom = document.getElementById("main_one");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "2%",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            name: "城市人口密集程度top10",
            type: "pie",
            radius: ["30%", "50%"],
            label: {
              show: true,
              formatter(param) {
                return param.name;
              },
              color: "#fff",
              fontSize: 12,
              overflow: "break",
            },
            data: [
              { value: 8000000099, name: '北京' },
              { value: 8000000000, name: '上海' },
              { value: 7000000000, name: '深圳' },
              { value: 6000000000, name: '西安' },
              { value: 5000000000, name: '宝鸡' },
              { value: 4000000000, name: '咸阳' },
              { value: 3000000000, name: '汉中' },
              { value: 2000000000, name: '安康' },
              { value: 1000000000, name: '邢台' },
              { value: 999999999, name: '天津' },
            ]
          },
        ],
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.leftbottom {
  .concent {
    .pre {
      width: 100%;
      height: 100%;
    }
  }

  .titles {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>